<template>
  <div class="user-edit-container">
    <!-- Header 区域 -->
    <van-nav-bar
      title="编辑资料"
      left-arrow
      @click-left="$router.back()"
      fixed
    />

    <!-- 用户资料 -->
    <van-cell-group class="action-card">
      <van-cell title="头像" is-link center>
        <template #default>
          <van-image round class="avatar" :src="obj.photo" @click="touxiang" />
          <!-- file 选择框 -->
          <input
            type="file"
            ref="iptFile"
            v-show="false"
            accept="image/*"
            @change="onFileChange"
          />
        </template>
      </van-cell>
      <van-cell title="名称" :value="obj.name" is-link @click="nameXiu" />
      <van-cell title="生日" :value="obj.birthday" @click="xiuGaisr" is-link />
    </van-cell-group>

    <!-- 修改名称弹窗 编辑用户名-->
    <van-dialog
      v-model="show"
      :before-close="namejy"
      title="修改用户名"
      show-cancel-button
    >
      <input v-juJiao v-model="username" type="text" name="" id="" />
    </van-dialog>

    <!-- 编辑时间 -- 生日 -->
    <van-popup v-model="popShow" round position="bottom" :style="{ height: '50%' }" >
      <van-datetime-picker
      v-model="currentDate"
      type="date"
      title="选择年月日"
      :min-date="minDate"
      :max-date="maxDate"
      @cancel="popShow = false"
      @confirm="wancheng"
    />
    </van-popup>
  </div>
</template>

<script>
import { userGeRenAPI, touXiangAPI, gengXinUserAPI } from '@/api'
import { Notify } from 'vant'
import moment from 'moment'
export default {
  name: 'UserEdit',
  data () {
    return {
      obj: {}, // 资料对象
      show: false, // 修改名字弹窗状态
      username: '', // 默认显示名称
      minDate: new Date(1890, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      popShow: false // 时间弹窗状态
    }
  },
  methods: {
    // 点击头像,出现文件选择器
    touxiang () {
      this.$refs.iptFile.click()
    },
    // 文件选择器出现,更换头像
    async onFileChange (e) {
      // 当前的文件对象
      // console.log(e.target.files[0])
      // 发送文件给后台
      const fd = new FormData()
      fd.append('photo', e.target.files[0]) // 后台规定格式
      const res = await touXiangAPI(fd)
      // console.log(res)
      this.obj.photo = res.data.data.photo
    },
    // 进入弹窗 修改用户名称
    nameXiu () {
      this.show = true // 开启弹窗
      this.username = this.obj.name // 默认显示名字
    },
    // 用户名提交前的校验
    async namejy (action, done) {
      // action的值,区分点的是哪个按钮
      if (action === 'confirm') {
        // 确定
        // 正则校验
        if (/^[A-Za-z0-9\u4e00-\u9fa5]{1,7}$/.test(this.username)) {
          await gengXinUserAPI({
            username: this.username
          })
          // 更新成功,
          this.obj.name = this.username
          // 关闭弹窗
          done()
        } else {
          Notify({ type: 'warning', message: '用户名中英文或数字1-7位' })
        }
      } else if (action === 'cancel') {
        // 取消
        done() // 关闭弹窗
      }
    },
    // 修改生日弹窗
    xiuGaisr () {
      // 弹窗显示
      this.popShow = true
      this.currentDate = new Date(this.obj.birthday)
    },
    // 确认修改生日
    async wancheng () {
      // 组件要日期对象
      // 后台要日期字符串
      // this.currentDate  日期对象
      // 后台要 年-月-日 格式的字符串
      // moment 第三方处理时间工具包
      const dateStr = moment(this.currentDate).format('YYYY-MM-DD')
      await gengXinUserAPI({
        birthday: dateStr
      })
      // console.log(res)
      // 前端页面同步
      this.obj.birthday = dateStr
      // 关闭弹窗
      this.popShow = false
    }
  },
  // 获取用户资料接口
  async created () {
    const res = await userGeRenAPI()
    console.log(res)
    this.obj = res.data.data
  }
}
</script>

<style lang="less" scoped>
.user-edit-container {
  padding-top: 46px;
  .avatar {
    width: 50px;
    height: 50px;
  }
}
/deep/ .van-dialog__content {
  text-align: center;
  input {
    text-align: center;
    border: none;
    color: rgb(94, 175, 252);
    margin: 15px 0 20px 0;
    font-size: 14px;
  }
}
/deep/ .van-picker {
  padding-top: 15px;
}
</style>
